<template>
	<el-card class="box-card">
		<div>
			<el-button type="primary" size="small" plain @click="add">添加标签</el-button>
		</div>
		<el-table :data="tableData" class="table" :default-sort="{ prop: 'order', order: 'descending' }" stripe>
			<el-table-column label="序号" type="index" width="50" align="center"> </el-table-column>
			<el-table-column prop="label_name" label="标签名" align="center"> </el-table-column>
			<el-table-column prop="order" label="排序" align="center"></el-table-column>
			<el-table-column label="操作" width="180" align="center">
				<template slot-scope="scope">
					<el-button type="warning" size="mini" @click="set(scope.row.id)" plain>修改</el-button>
					<el-button type="danger" size="mini" @click="del(scope.row.id)" plain>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>

<script>
export default {
	props: ['tableData'],
	data() {
		return {};
	},
	methods: {
		add() {
			this.$emit('add');
		},
		async del(id) {
            await this.$confirm('确定删除该数据?', '提示', { type: 'warning' });
			this.$emit('del', id);
		},
		set(id) {
			this.$emit('set', id);
		},
	},
};
</script>

<style >
.box-card {
	padding: 20px;
}

.table {
	padding-top: 20px;
}
.cell{
/* 强制一行显示*/
 white-space: nowrap !important;
 /* 溢出隐藏 */
 overflow: hidden !important;
/* 溢出部分变成... */
text-overflow: ellipsis !important;
}
</style>
